<template>
	<view class="all_body">
		<view class="" class="title">
			登录
		</view>
		<view class="baby_container">
			<view class="baby_img">
				<image src="../../static/image/cat.jpeg" mode=""></image>
			</view>
			
			<view class="bady_input">
				<view class="input_item input_button">
					<input type="text" value="" placeholder="请输入邮箱" v-model="mail" />
					<button type="primary" @click="sendMail()">{{!isSendMail?'发送验证码':count+ 'S'}}</button>
				</view>
				<view class="input_item" >
					<input  value="" placeholder="请输入验证码" v-model="code"/>
				</view>
				
			<view class="baby_item_other">
				
				<view class="item_detail" @click="changeMethodsLogin()">
					账户密码登录
				</view>
			
			</view>
			
				<view class="btn_user_login">
					<button type="default" @click="mail_login()">登录</button>
				</view>
			
				
				
			</view>
			
			
		</view>
		
		
		
		
	</view>	
</template>

<script>
		import request from "../../static/utils/request.js"
		import mail from '../../static/utils/mail.js'
		// import timers from '../../static/utils/timer.js'
	export default {
		data(){
			return {
				mail:"",
				code:"",
				isSendMail:false,
				count:60
			}
		},
		methods:{
			mail_login(){
				let parmas  = {
								  mail:this.mail,
								  code:this.code
				 }
				request("POST","phone",parmas).then(res=>{
					console.log(res)
								 if(res.data.err==0){
									 uni.showToast({
									 	title:res.data.msg
									 })
									 uni.navigateTo({
									 	url:"../home/home"
									 })
								 }else{
									 uni.showToast({
									 title:res.data.msg,
									 icon:"none"
									 })
								 }
				})
						
			},
			
	async	sendMail(){
		// this.count = 60
		// let res =await 	timers(this.mail)
		// console.log(res)
		// this.isSendMail = true
		// console.log(this.count)
		// console.log(this.isSendMail)
		// let timer = setInterval(()=>{
		//   if(this.count>0&&this.count<=60){
		// 	  console.log(11111111)
		// 	  this.count-=10
		//   }else{
		// 	 clearInterval(timer)
		// 	 this.isSendMail = false
		//   }						
		// },1000)
		
		
		
			let res = await mail({mail:this.mail})
			console.log(res)
				if(res.data.err==-1){
					uni.showToast({
						title:res.data.msg,
						icon:"none"
					})
				}else if(res.data.err==0){
					uni.showToast({
						title:res.data.msg
					})
					this.isSendMail = true
					this.count = 60
					let timer = setInterval(()=>{
                      if(this.count>0&&this.count<=60){
						  this.count-=1
					  }else{
						 clearInterval(timer)
						  this.isSendMail = false
					  }						
					},1000)
				}
			},
			changeMethodsLogin(){
				uni.navigateTo({
					url:"login"
				})
			}
		}
	}
</script>

<style lang="less">
	.title{
		width: 100%;
		height: 100rpx;
		// background-color: black;
		margin-top: 50rpx;
		text-align: center;
		font-weight: 400;
		font-size: 45rpx;
	}
	.baby_container{
		width: 80%;
		height: 70%;
		// background: pink;
		border: 1rpx solid rgba(187, 187, 187,0.1);;
		box-shadow: 0 0 40rpx rgba(170, 170, 170,1);
		margin: auto;
		padding-top: 40rpx;
		box-shadow:5px black ;
		.baby_img{
			width: 100%;
			height: 260rpx;
			// background: yellow;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				
			}
		}
		.bady_input{
			width: 100%;
			height: 40%;
			// background: black;
			
			.input_item{
				width: 80%;
				height: 20%;
				// background: white;
				margin: auto;
	            border-bottom: 1rpx solid black;
			   
            	input{
					width: 100%;
					height: 100%;
					// border-radius: 10%;
				    // margin-bottom: 30rpx;
					font-size: 25rpx;
			        // border-radius: 40rpx;
			        // border-bottom: 1rpx solid black;
					transform: translateX(30rpx);
			        text-align: left;
				}			
			}
		}
		.baby_item_other{
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 25rpx;
			padding-top: 20rpx;
			.item_detail{
				width: 100%;
				text-align: center;
			}
		}
		.btn_user_login{
			margin-top: 70rpx;
			width: 100%;
			height: 100%;
		    
			button{
				width: 80%;
				border-radius: 50rpx;
				color: #fff;
				background: rgba(51, 54, 67, 1)
		
			}
		}
		}
	
	.input_button{
		display: flex;
		justify-content: space-around;
		align-items: center;
	    
		button{
		   width: 60%;
		   height: 50rpx;
		   font-size: 20rpx;
		   	
		}
	}
</style>
